<template>
  <view>
    <view class="body">
      <view class="header-title">添加账号</view>
      <!-- 账号密码登录 -->
      <template>
        <view class="my-4"
          ><u-input type="text" v-model="username" placeholder="请输入姓名"
        /></view>
        <view class="my-4"
          ><u-input type="text" v-model="mobile" placeholder="请输入手机号码"
        /></view>
        <view class="my-4"
          ><u-input
            type="password"
            v-model="password"
            placeholder="请输入新登陆密码"
        /></view>
        <u-radio-group class="my-5" v-model="sex" @change="radioGroupChange">
          <u-radio
            @change="radioChange"
            shape="circle"
            active-color="success"
            v-for="(item, index) in list"
            :key="index"
            :name="item.value"
          >
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </template>
      <button
        class="user-set-btn my-5"
        :class="{ 'user-set-btn-disable': disabled }"
        type="primary"
        :loading="loading"
        @click="adduserHandle"
        :disabled="disabled"
      >
        添加
      </button>
      <u-modal title="注册成功" v-model="show" :content="content"></u-modal>
    </view>
  </view>
</template>

<script>
import md5 from '../../common/md5.js'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      show: false,
      content: ``,
      loading: false,
      disabled: true,
      username: '',
      password: '',
      mobile: '',
      sex: 0,
      list: [
        {
          name: '男',
          value: 0,
        },
        {
          name: '女',
          value: 1,
        },
      ],
    }
  },
  watch: {
    username(val) {
      this.OnBtnChange()
    },
    password(val) {
      this.OnBtnChange()
    },
    mobile(val) {
      this.OnBtnChange()
    },
  },

  methods: {
    // 选中某个单选框时，由radio时触发
    radioChange(e) {
      // console.log(e);
    },
    // 选中任一radio时，由radio-group触发
    radioGroupChange(e) {
      // console.log(e);
    },
    // 初始化表单
    initInput() {
      this.username = ''
      this.password = ''
      this.mobile = ''
    },
    // 改变按钮状态
    OnBtnChange() {
      if (this.username && this.password && this.mobile) {
        this.disabled = false
        return
      }
      this.disabled = true
    },
    isPhone() {
      let mPattern = /^1[345678]\d{9}$/
      return mPattern.test(this.mobile)
    },
    //add
    adduserHandle() {
      let payload = {
        username: this.username,
        // password: this.password,
        password: md5.hex_md5(this.password),
        mobile: this.mobile,
        sex: this.sex,
      }
      // 验证手机号合法性
      if (!this.isPhone()) {
        return uni.showToast({ title: '请输入正确的手机号码', icon: 'none' })
      }
      this.$store.dispatch('addOrUpdateFactoryUser', payload).then((res) => {
        if (res.data.errorCode === 0) {
          this.show = true
          this.content = `请牢记账号:${res.data.data.factoryUserNo}`
          this.initInput()
        }
        // console.log(res.data.data)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.body {
  background-color: #fff;
}
phone-code-extend {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 100;
}
.login-font-color {
  color: #5880ff;
}
.body {
  padding: 0 30upx !important;
  .header-title {
    margin-top: 40upx;
    font-size: 55upx;
    font-weight: 700;
    line-height: 130upx;
  }
  .login-input-box {
    position: relative;
    font-size: 30upx;
    border-bottom: 1upx solid #f4f4f4;
    /deep/.phone-input {
      input {
        padding-left: 100upx;
      }
    }
    /deep/.u-input {
      input {
        font-size: 34upx !important;
      }
    }
    .phone {
      @extend phone-code-extend;
      width: 100upx;
      left: 0;
      font-weight: bold;
    }
    .send-code {
      @extend phone-code-extend;
      width: 150upx;
      right: 0;
    }
    .yanzhengma view {
      background: #eeeeee;
      border-radius: 10upx;
      font-size: 25upx;
      width: 150upx;
      padding: 10upx 0;
    }
  }
  .login-input-box:nth-child(2) {
    margin: 80upx 0;
  }
  .register-forget {
    padding: 40upx 0;
    font-size: 30upx;
    color: #999999;
  }
  .login-status {
    padding: 40upx 0;
    font-size: 32upx;
  }
  .other-login-title {
    position: relative;
    color: #999999;
    font-size: 30upx;
    font-weight: 400;
    &::before {
      content: '';
      position: absolute;
      background: #bbbbbb;
      height: 2upx;
      width: 22%;
      top: 50%;
      left: 5%;
    }
    &::after {
      content: '';
      position: absolute;
      background: #bbbbbb;
      height: 2upx;
      width: 22%;
      top: 50%;
      right: 5%;
    }
  }
  .other-login {
    padding: 20upx 80upx;
    button {
      background-color: #ffffff;
      image {
        width: 110rpx;
        height: 110rpx;
      }
      &::after {
        border: none !important;
      }
    }
  }
}
</style>
